<template>
  <a-config-provider :locale="locale">
    <a-layout id="components-layout-demo-top"
              class="layout">
      <a-layout-header>
        <div class="logo" />
        <a-menu theme="dark"
                mode="horizontal"
                v-model:selectedKeys="selectedKeys"
                :style="{ lineHeight: '64px' }">
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="/plan">
            <router-link to="/plan">时间计划</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content style="padding: 0 50px">
        <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
          <a-row>
            <a-col :span="6">
              <a-card title="计划总用时"
                      style="width:100%">
                <p>总共时长是:{{allTime}}</p>
              </a-card>
            </a-col>
            <a-col :span="16"
                   :offset="2">
              <router-view></router-view>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        sbotlp vue3 ant-design
      </a-layout-footer>
    </a-layout>
  </a-config-provider>
</template>
<script>
  import { reactive, toRefs, watch, computed, ref, watchEffect } from 'vue';
  import { useRoute } from 'vue-router';
  import { useStore } from 'vuex';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  export default {
    //props 父组件传下的值
    // context 对象包含了attr slots  emit
    setup (props, context) { // 入口函数，只执行一次，此函数中没有this，并且 return 就是render 支持 return jsx
      const router = useRoute();
      const store = useStore();
      const state = reactive({ // 统一管理当前文件的state
        selectedKeys: ['/'],
        allTime: 0,
        locale: zhCN,
      });
      state.selectedKeys = computed(() => {
        return [router.path]
      })
      watch(() => store.state.planList, (newValue) => {
        state.allTime = setAllTime(newValue)
      })
      const setAllTime = (list) => {
        return list.map(item => item.time).reduce((p, n) => p + n, 0)
      }
      return {
        ...toRefs(state) // 保证数据还是响应式的 并且还有解构的功能 拆包
      }
    }
  };
</script>
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  * {
    margin: 0;
    padding: 0;
  }
  #components-layout-demo-top .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 24px 16px 0;
    float: left;
  }
</style>
